<template>
<div id="pin-form-msg">
  <group>
    <datetime title="我计划" placeholder="几点开始" v-model="formData.startDateTime" format="YYYY-MM-DD HH:mm" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" :start-date="minStartDate" @on-change="updateEndDateTimeRange"></datetime>
    <datetime title="最晚到" placeholder="几点结束" v-model="formData.endDateTime" format="YYYY-MM-DD HH:mm" year-row="{value}年" month-row="{value}月" day-row="{value}日" hour-row="{value}点" minute-row="{value}分" :start-date="minEndDate" :min-hour="minEndHour"></datetime>
    <selector title="在" v-model="formData.dinerName" :options="optionDiners"></selector>
    <x-textarea title="约个" placeholder="输入你想认识的人的任何描述词语，例如：开朗、健谈" v-model="formData.content" :max="200" :height="72" :rows="3" autosize></x-textarea>
    <selector title="的" v-model="formData.gender" :options="['帅哥', '妹子', '帅哥、妹子都可以']"></selector>
    <h3 class="text-center">吃个饭</h3>
    <br />
  </group>
  <box gap="20px">
    <x-button type="primary" @click.native="submit" :disabled="!canSubmit">提交</x-button>
  </box>
</div>
</template>
<script>
const defaultFormData = {
  title: '',
  content: '',
}
import {
  dateFormat
} from 'vux'
export default {
  data() {
    let formData = Object.assign({}, defaultFormData)
    let minMS = Date.parse(new Date()) + 3600 * 1000 * 1
    let minStartDate = dateFormat(minMS, 'YYYY-MM-DD')
    let minStartHour = parseInt(dateFormat(minMS, 'HH'), 10)
    let optionDiners = ['外婆家', '万象城', '绿茶', '台塑王品', '西贝莜面村', '五彩城', '万达广场', '环球城']
    return {
      formData,
      minStartDate,
      minStartHour,
      minEndDate: minStartDate,
      minEndHour: minStartHour,
      optionDiners,
      isSubmitting: false,
    }
  },
  computed: {
    canSubmit() {
      if (this.isSubmitting) {
        return false
      }
      return false
    }
  },
  methods: {
    updateEndDateTimeRange(dateTime) {
      let minMS = Date.parse(dateTime) + 3600 * 1000
      this.minEndDate = dateFormat(minMS, 'YYYY-MM-DD')
      this.minEndHour = parseInt(dateFormat(minMS, 'HH'), 10)
      this.formData.endDateTime = dateFormat(minMS, 'YYYY-MM-DD HH:mm')
    },
    submit() {
      let postData = this.formData
      this.isSubmitting = true
      this.$vux.loading.show({
        text: '提交中...'
      })
      this.$axios.post('/fan-gravity/map', postData)
        .then(data => {
          this.$vux.loading.hide()
          this.$vux.toast.text('提交成功！', 'top')
          this.isSubmitting = false
          this.formData = defaultFormData
          this.$emit('end-submit')
        })
        .catch(err => {
          this.$vux.alert.show({
            title: '出错啦！',
            content: err,
          })
          this.isSubmitting = false
          this.$vux.loading.hide()
        })
    }
  }
}
</script>
<style lang="stylus" scoped>
/*#pin-form-msg*/
</style>
